<template>
  <su-page bg="#f7f7f7">
    <su-body :end="showEnd">
      <div class="p10 white-bg">
        <u-search v-model="searchKey" placeholder="输入通知标题搜索" :showAction="false" @search="reloadlist"></u-search>
      </div>
      <!-- list -->
			<view class="su-grant-card">
				<view class="su-grant-card-rowprop__group mt5" v-for="(data, index) in list" :key="index">
				  <view class="su-grant-card-rowprop">
				    <text class="su-label">通知标题：</text>
				    <text class="su-value">{{data.BT || '--'}}</text>
				  </view>
				  <view class="su-grant-card-rowprop">
				    <text class="su-label">发送时间：</text>
				    <text class="su-value">{{data.FSSJ || '--'}}</text>
				  </view>
				  <view class="su-grant-card-rowprop">
				    <text class="su-label">通知内容：</text>
				    <text class="su-value">{{data.NR || ''}}</text>
				  </view>
					<u-button @click="cardClick(data)">
					  <text class="color-primary">详情</text>
					</u-button>
				</view>
			</view>
      <!-- loading -->
      <su-list-loading :loading="listLoading" :listLength="list.length"></su-list-loading>
      <!-- 无数据 -->
      <u-empty v-if="list.length === 0" class="mt40" mode="data"></u-empty>
    </su-body>
  </su-page>
</template>

<script>
	/* @Description: 主管部门回执情况列表
	 * @Author: Yinchy
	 * @CreatDate: 2022-11-23 20:45:52
	 * @Params: 
	 */
  import SuGrantCard from './components/su-grant-card.vue'
	import { runSQL } from '../../../common/utils/wxutils'
  export default {
    components: {
      SuGrantCard
    },
    data() {
      return {
				fsrid: JSON.parse(uni.getStorageSync('userInfo')).HUMANID || 100,
        // 查询参数
				pageNum: 0,
				pageSize: 10,
        searchKey: '',
        list: [],
        listTotal: 0,
        listLoading: false,
				showEnd: false
      }
    },
    onLoad(params) {
      this.reloadlist()
    },
    methods: {
      //初始化参数，重新加载列表
      reloadlist(stopPullDownRefresh) {
        this.listLoading = false
        this.list = []
        this.pageNum = 0
				let sql = '';
				if(this.searchKey.trim()){
					sql += ` and bt like '%${this.searchKey}%'`
				}
        this.getlist(stopPullDownRefresh, sql)
      },
      //获取列表数据
      getlist(stopPullDownRefresh, sql = '') {
        if (this.listLoading) return
        this.listLoading = true;
				runSQL(`select * from ssnydw.tzfs where FSRID = ${this.fsrid} ${sql} order by fssj desc limit ${this.pageSize} OFFSET ${this.pageNum}*${this.pageSize};`).then(res=>{
					if(res[0].length > 0){
						this.list = this.list.concat(res[0]);
						this.pageNum++
					}
					this.listLoading = false;
					this.dataLoadedHandler(res[0], stopPullDownRefresh);
				})
      },
      // 列表请求成功后处理
      dataLoadedHandler(res, stopPullDownRefresh) {
        if (res.length < this.pageSize) {
					this.showEnd = true
        }
        if (stopPullDownRefresh) {
          uni.stopPullDownRefresh()
        }
      },
			cardClick(item){
				this.$u.route({
					url: '/pages/main/notice/detail/detail',
					params: {
						...item
					}
				})
			}
    },
    onPullDownRefresh() {
			this.pageNum = 0;
      this.reloadlist(true)
    },
    onReachBottom() {
      console.log('触底')
      this.getlist()
    }
  }
</script>

<style lang="scss" scoped>
	.su-grant-card {
	  display: flex;
	  margin-bottom: 20upx;
	  background-color: transparent;
	  flex-direction: column;
	  border-radius: 16upx;
	  box-shadow: 0 2upx 6upx rgba(0, 0, 0, 0.03);
	
	  &-body {
	    display: flex;
	    padding: 24upx 24upx 6upx 24upx;
	    transition: all 0.3s;
	
	    &:active {
	      opacity: 0.7;
	    }
	  }
	
	  &-img {
	    height: 200upx;
	    background-color: #f7f7f7;
	    border-radius: 6upx;
	    width: 180upx;
	    margin-right: 30upx;
	
	    image {
	      width: 100%;
	      height: 100%;
	      border-radius: 10upx;
	    }
	  }
	
	  &-main {
	    display: flex;
	    flex-direction: column;
	    flex: 1;
	
	    &__top {
	      flex: 1;
	    }
	  }
	
	  &-price {
	    font-weight: bold;
	    color: $u-error;
	    font-size: 32upx;
	  }
	
	  &-row {
	    display: flex;
	    justify-content: space-between;
	    align-items: center;
	    font-size: 24upx;
	    color: #aaa;
	
	    &__main {
	      flex: 1;
	    }
	
	    &__asider {
	      margin-left: 10upx;
	    }
	
	    &__group {
	      padding: 6upx 0;
	    }
	  }
	
	  &-rowprop {
	    display: flex;
	    font-size: 24upx;
	    color: #aaa;
	    padding: 6upx 0;
			
	    &::before {
	      content: '';
	      display: block;
	      width: 10upx;
	      height: 10upx;
	      border-radius: 10upx;
	      background-color: #ddd;
	      margin-right: 10upx;
	      margin-top: 12upx;
	    }
	
	    .su-label {
	      color: #999;
	    }
	
	    .su-value {
	      color: #555;
	      flex: 1;
	    }
	
	    &__group {
	      padding: 12upx 0;
				background-color: #fff;
	    }
	  }
	
	  &-footer {
	    height: 80upx;
	    border-top: solid 1upx #f5f5f5;
	    display: flex;
	    align-items: center;
	    font-size: 28upx;
	
	    &.large-btn {
	      /deep/.u-button {
	        border: none;
	        height: 100%;
	        // border-right: solid 1upx #eee;
	        border-radius: 0;
	
	        &:last-child {
	          border-right: none;
	          border-radius: 0 0 16upx 0;
	        }
	
	        &:first-child {
	          border-radius: 0 0 0 16upx;
	        }
	      }
	    }
	  }
	
	  &-name {
	    font-size: 32upx;
	    color: #2A333B;
	    font-weight: bold;
	  }
	
	  &-props {
	    display: flex;
	    margin-top: 12upx;
	  }
	
	  &-prop {
	    background: #f8f8f8;
	    border-radius: 4upx;
	    font-size: 24upx;
	    color: #666;
	    line-height: 36upx;
	    height: 40upx;
	    display: flex;
	    align-items: center;
	    padding: 2upx 16upx;
	    margin-right: 12upx;
	    box-shadow: 0 0 1upx rgba(0, 0, 0, 0.05);
	  }
	
	  &-description {
	    font-size: 22upx;
	    color: #AAAAAA;
	    margin-top: 12upx;
	  }
	}
</style>
